<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ include file="../config/config.jsp"%>

<%@ page import="java.io.*,java.util.*"%>
<%@ page import="javax.servlet.*,java.text.*"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>影厅选择界面</title>
<link rel="stylesheet" href="<%=basePath%>/css/bootstrap.min.css" />
<link rel="stylesheet" href="<%=basePath%>/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="<%=basePath%>/css/public.css">
<!-- 公共样式 -->
<link rel="stylesheet" href="<%=basePath%>/css/film_detail.css">
<link rel="stylesheet" href="<%=basePath%>/css/index.css">

<script src="<%=basePath%>/js/jquery-3.2.1.min.js"></script>
<script src="<%=basePath%>/js/bootstrap.min.js"></script>
	
<style type="text/css">
.col-md-3 {
	width: 22%
}

.nav-tabs {
	border-bottom: 0px;
}

.h5 {
	font-size: 15px;
	line-height: 20px;
}

.nav>li {
	min-height: 39px;
}

.table {
	margin-bottom: 0px;
}

.shadow_bottom:hover {
	display: inline-block;
	transition: 0.2s;
	box-shadow: 0 8px 8px #ccc;
}
</style>
</head>

<body>
	<!--头部导航-->
	<nav class="navbar navbar-default navbar-fixed-top nav-min-height">
		<div class="container">
			<div class="navbar-header nav-min-height">
				<a href="#" class="navbar-brand logo"><img
					src="<%=basePath%>/images/logo.png" alt=""></a>
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target="#navbar-collapse">
					<span class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
			</div>
			<div class="collapse navbar-collapse  nav-min-height"
				id="navbar-collapse">
				<ul class="nav navbar-nav navbar-right  nav-min-height">
					<li class="active"><a href="<%=basePath%>/indexServlet"><span
							class="glyphicon glyphicon-home"></span> 首页</a></li>
					<li><a href="<%=basePath%>ticketServlet?method=selectByUser&userId=${sessionScope.loginUser.userId}"><span class="glyphicon glyphicon-user"></span>
							${sessionScope.loginUser.userName}</a></li>
				</ul>
			</div>
		</div>
	</nav>
	<!--影片详情-->
	<div class="movie_detail">
		<div class="container movie_content">
			<h3>
				<strong>${movie.movieName }</strong>
			</h3>
			<h5 class="show_time pull-right h5">
				<strong>上映时间 : </strong><span style="color: rgb(255, 15, 75)"
					id="releaseTime"></span>
			</h5>
			<div class="col-md-3 col-xs-6"
				style="padding-left: 0px; padding-right: 0px;">
				<div class="col-md-11 col-md-push-1" style="padding-left: 0px;">
					<img class="img-responsive"
						src="<%=basePath%>/upload/${movie.poster}"
						style="width: 215px; height: 300px;">
				</div>
			</div>
			<div class="col-md-6 col-xs-6 movie_info">
				<span class="h4 "><strong>“</strong>${movie.slogan }<strong>”</strong></span>
				<p class="h5">导演：${movie.director }</p>
				<p class="h5">主演：${movie.starring }</p>
				<p class="h5">类型：${movie.movieType }</p>
				<p class="h5">语言：${movie.language }</p>
				<p class="h5">片长：${movie.duration }分钟</p>
				<p class="h5 hidden-xs" style="line-height: 22px;">剧情介绍：${movie.detail }</p>
			</div>
			<div class="col-md-3 hidden-xs" style="margin-left: 65px;">
				<p class="h5 cast_title" style="font-weight: bold;">演员表</p>
				<div class="cast_img pull-left" style="width: 110px;">
					<img class="img-circle"
						src="<%=basePath%>/upload/${movie.manActorPic}" alt=""
						style="width: 90px; height: 90px;">
				</div>
				<div class="cast_img">
					<img class="img-circle"
						src="<%=basePath%>/upload/${movie.womanActorPic}" alt=""
						style="width: 90px; height: 90px;">
				</div>
			</div>
		</div>
	</div>


	<!-- 选座购票 -->
	<div class="container arrangement">
		<h3 class="arrangement_title">选座购票</h3>
		<div class="container">
			<!--时间-->
			<div class="row" style="width: 1140px; overflow: inherit;">
				<div class="col-md-1">
					<span
						style="line-height: 40px; font-weight: bold; font-size: 16px; color: rgb(255, 15, 75);">选择时间</span>
				</div>
				<div class="col-md-10">
					<ul class="nav nav-tabs" role="tablist"
						style="color: black; font-weight: bold">
						<li class="active"><a href=".dayone" aria-controls="home"
							role="tab" data-toggle="tab" id="today"></a></li>
						<li style="padding-left: 10px;"><a href=".daytwo"
							aria-controls="home" role="tab" data-toggle="tab" id="tomorrow">10月1日</a></li>
						<li style="padding-left: 10px;"><a href=".daythree"
							aria-controls="home" role="tab" data-toggle="tab" id="nextDay">10月2日</a></li>
					</ul>
				</div>
			</div>

			<div class="row" style="width: 1140px; margin-top: 1px;">
				<table class="table table-responsive hall-table">
					<thead>
						<tr>
							<th style="width: 20%; text-align: center;">放映时间</th>
							<th style="width: 20%; text-align: center;">语言版本</th>
							<th style="width: 20%; text-align: center;">放映厅</th>
							<th style="width: 20%; text-align: center;">现价（元）</th>
							<th style="width: 20%; text-align: center;">选座购票</th>
						</tr>
					</thead>
				</table>
			</div>

			<div class="tab-content"
				style="margin-left: -15px; width: 1140px; min-height: 210px;">
				<%
					// 获取场次、场厅信息
					List<Map<String, Object>> movieSessionList = (List<Map<String, Object>>) request.getAttribute("movieSessionList");

					// 获取电影信息
					Movie movie = (Movie) request.getAttribute("movie");

					for (int i = 0; i < movieSessionList.size(); i++) {
						Map<String, Object> obj = movieSessionList.get(i);
						MovieSession ms = (MovieSession) obj.get("movieSession");
						Hall hall = (Hall) obj.get("hall");
						SimpleDateFormat ftDateTime = new SimpleDateFormat("yyyy-MM-dd HH:mm");
						SimpleDateFormat ftDate = new SimpleDateFormat("yyyy-MM-dd");
						SimpleDateFormat ftTime = new SimpleDateFormat("HH:mm");
						String sessionDate = ftDate.format(ftDateTime.parse(ms.getTime())); // 获取的当前排片日期
						String time = ftTime.format(ftDateTime.parse(ms.getTime())); // 获取的当前时间
						
						Date date0 = new Date();
						
						Date date1 = new Date();
						date1.setDate(date1.getDate() + 1);

						Date date2 = new Date();
						date2.setDate(date2.getDate() + 2);

						String today = ftDate.format(date0);

						String tomorrow = ftDate.format(date1);

						String nextday = ftDate.format(date2);
				%>

				<div role="tabpanel" class="tab-pane active dayone">
					<table class="table table-responsive" border="0" cellspacing="0"
						cellpadding="0">
						<%
							if (sessionDate.equals(today)) {
								if(ms.getDate().getTime()+(movie.getDuration()*60*1000)-System.currentTimeMillis()>=0){//也要加时长
						%>
						<tr style="text-align: center;">
							<td style="width: 20%; text-align: center;">
 							 <%=time%>
						   </td>
							<td style="width: 20%; text-align: center;"><%=movie.getLanguage()%></td>
							<td style="width: 20%; text-align: center;"><%=hall.getHallName()%></td>
							<td style="width: 20%; text-align: center;"><%=ms.getPrice()%></td>
							<td style="width: 20%; text-align: center;"><a
								href="<%=basePath%>seatsServlet?method=initSeats&sessionId=<%=ms.getSessionId()%>"
								style="display: inline-block; width: 50px; height: 25px; line-height: 25px; border-radius: 9px; background: rgb(255, 15, 75); color: #fff;">购
									票</a></td>
						</tr>
						<%
							}
							}
						%>
					</table>
				</div>


				<div role="tabpanel" class="tab-pane daytwo">
					<table class="table table-responsive" border="0" cellspacing="0"
						cellpadding="0">
						<%
							if (sessionDate.equals(tomorrow)) {
						%>
						<tr style="text-align: center;">
							<td style="width: 20%; text-align: center;"><%=time%></td>
							<td style="width: 20%; text-align: center;"><%=movie.getLanguage()%></td>
							<td style="width: 20%; text-align: center;"><%=hall.getHallName()%></td>
							<td style="width: 20%; text-align: center;"><%=ms.getPrice()%></td>
							<td style="width: 20%; text-align: center;"><a
								href="<%=basePath%>seatsServlet?method=initSeats&sessionId=<%=ms.getSessionId()%>"
								style="display: inline-block; width: 50px; height: 25px; line-height: 25px; border-radius: 9px; background: rgb(255, 15, 75); color: #fff;">购
									票</a></td>
						</tr>
						<%
							}
						%>
					</table>
				</div>
				<div role="tabpanel" class="tab-pane daythree">
					<table class="table table-responsive" border="0" cellspacing="0"
						cellpadding="0">
						<%
							if (sessionDate.equals(nextday)) {
						%>
						<tr style="text-align: center;">
							<td style="width: 20%; text-align: center;"><%=time%></td>
							<td style="width: 20%; text-align: center;"><%=movie.getLanguage()%></td>
							<td style="width: 20%; text-align: center;"><%=hall.getHallName()%></td>
							<td style="width: 20%; text-align: center;"><%=ms.getPrice()%></td>
							<td style="width: 20%; text-align: center;"><a
								href="<%=basePath%>seatsServlet?method=initSeats&sessionId=<%=ms.getSessionId()%>"
								style="display: inline-block; width: 50px; height: 25px; line-height: 25px; border-radius: 9px; background: rgb(255, 15, 75); color: #fff;">购
									票</a></td>
						</tr>
						<%
							}
						%>
					</table>
				</div>
				<%
					}
				%>
			</div>
		</div>
	</div>
	<!-- 选座购票 end -->

	<!-- 热门推荐 -->
	<div class="container hotRecommend">
		<h3 class="hotRecommend_title">热门推荐</h3>
		<div class="row content" style="height: 270px;">
			<%
				List<Movie> hotMovieList = (List<Movie>) request.getAttribute("hotMovies");
				for (int i = 0; i < hotMovieList.size(); i++) {
					Movie m = hotMovieList.get(i);
			%>
			<div class="col-md-2  col-sm-3 col-xs-3"
				style="padding: 10px 10px 20px 10px;">
				<a href="#" class="shadow_bottom"> <img
					src="<%=basePath%>/upload/<%=m.getPoster()%>"
					alt="<%=m.getMovieName()%>"
					class="img-responsive img-rounded lara" style="height:233px;">
				</a>
			</div>
			<%
				}
			%>
		</div>
	</div>
	<!-- 热门推荐 end -->

	<!--底部-->
	<div class="container-fluid foot">
		<div class="footer"
			style="margin: 0 auto; color: white; text-align: center; padding-top: 15px;">
			<p>
				友情链接 : <a href="http://maoyan.com/">猫眼电影 </a>| <a
					href="https://dianying.taobao.com/">淘票票</a>
			</p>
			<p>琥珀时光影城</p>
		</div>
	</div>
	
<script>

$(function() {
	// 当前时间
	var time = "${movie.releaseTime }"
	var date = new Date(time);
	var releaseTime = date.getFullYear() + '-' + (date.getMonth() + 1)
			+ '-' + date.getDate();
	$("#releaseTime").html(releaseTime);

	var today = GetDateStr(0);
	var tomorrow = GetDateStr(1);
	var nextDay = GetDateStr(2);
	// 时间选项卡设置
	$("#today").html(today);
	$("#tomorrow").html(tomorrow);
	$("#nextDay").html(nextDay);
});

function GetDateStr(AddDayCount) {
	var dd = new Date();
	dd.setDate(dd.getDate() + AddDayCount);//获取AddDayCount天后的日期
	var y = dd.getFullYear();
	var m = dd.getMonth() + 1;//获取当前月份的日期
	var d = dd.getDate();
	return y + "-" + m + "-" + d;
}
	
</script>
</body>

</html>